<template>
  <div>
    <div class="head">
      <div @click="$router.back(-1)" class="return"></div>划转
    </div>
    <div class="overlay">
      <div class="overlay-content">
        <div class="transfer">
          <div class="transfer_title">
            <span>划转方向</span>
          </div>
          <div class="transfer_content">
            <div>
              <van-cell-group>
                <p>
                  <font color="848cab" size="2">从</font>
                </p>
                <van-cell :title="text" is-link @click="show = true"></van-cell>
                <p>
                  <font color="848cab" size="2">转到</font>
                </p>
                <van-cell :title="text3" is-link @click="show3 = true"></van-cell>
                <p>
                  <font color="848cab" size="2">币种</font>
                </p>
                <van-cell title="AIDT"></van-cell>
                <p>
                  <font color="848cab" size="2">划转数量</font>
                </p>
                <van-field placeholder="请输入划转数量" v-model="num">
                  <van-button slot="button" size="small" type="primary" @click="transferBoth">全部转入</van-button>
                </van-field>
              </van-cell-group>
              <p>
                <font color="848cab" size="2">
                  可转数量
                  <span>{{transferNum}} AIDT</span>
                </font>
              </p>
            </div>
            <div class="transfer_submit">
              <van-button type="primary" @click="transfer">确认划转</van-button>
            </div>
          </div>
        </div>
        <!-- 从 -->
        <van-popup v-model="show" style="width:80%;border-radius: 10px;background: transparent;">
          <div class="transfer_count">
            <div class="count_title">请选择账户</div>
            <div class="count_content">
              <van-checkbox-group v-model="result">
                <van-checkbox
                  v-for="(item, index) in list"
                  :key="item"
                  :name="item"
                  class="count_count"
                  @click="countChange(item,index)"
                >{{item}}</van-checkbox>
              </van-checkbox-group>
            </div>
            <div class="footer">
              <span @click="clearCountClick">取消</span>
              <span @click="countClick">确定</span>
            </div>
          </div>
        </van-popup>
        <!-- 转到 -->
        <van-popup v-model="show3" style="width:80%;border-radius: 10px;background: transparent;">
          <div class="transfer_count">
            <div class="count_title">请选择账户</div>
            <div class="count_content">
              <van-checkbox-group v-model="result2">
                <van-checkbox
                  v-for="(item, index) in list"
                  :key="item"
                  :name="item"
                  class="count_count"
                  @click="countChange2(item,index)"
                >{{item}}</van-checkbox>
              </van-checkbox-group>
            </div>
            <div class="footer">
              <span @click="clearCountClick">取消</span>
              <span @click="countClick2">确定</span>
            </div>
          </div>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { base, mine } from "./../utils/api";
export default {
  name: "Transfer",
  data() {
    return {
      show: false,
      show2: false,
      show3: false,
      num: "",
      index: 1, //第一个账户
      index2: 1, //第二个账户
      text: "请选择账户",
      text2: "",
      text3: "请选择账户",
      text4: "",
      transferNum: "0",
      checked: true,
      list: ["钱包账户", "币币账户", "OTC账户"],
      result: [],
      result2: []
    };
  },
  beforeCreate() {},
  mounted() {},
  methods: {
    onInput(value) {
      this.num += value;
    },
    onDelete() {
      this.num = this.num.substr(0, this.num.length - 1);
    },
    countChange(item, index) {
      this.result.length = 0;
      this.index = index + 1;
      this.text2 = item;
      // this.result = [item];
      console.log(this.result);
    },
    countChange2(item, index) {
      this.result2.length = 0;
      this.index2 = index + 1;
      this.text4 = item;
      // this.result = [item];
      console.log(this.result);
    },
	transfer() {  //划转
	  if(this.text.includes("请选择账户")){
		Toast('请选择账户');
		return false;
		}
		if(this.text3.includes("请选择账户")){
		Toast('请选择转到账户');
		return false;
		}
	  if(!this.num) {
        Toast('划转数量不能为空！');
        return false;
      }
	  this.loading = true;
      mine.getAccountTransfer({
		  source: this.index,
		  target: this.index2,
          num: this.num,
        })
        .then(res => {
          if (res.code == 200) {
			this.loading = false;
			this.num = '';
			this.accounNum();

          } else if (res.code == 500) {
            this.loading = false;
          }
          Toast(res.msg);
        });
    },
    countClick() {
      this.text = this.text2;
      this.clearCountClick();
      this.accounNum();
    },
    countClick2() {
      this.text3 = this.text4;
      this.clearCountClick();
    },
    clearCountClick() {
      this.show = false;
      this.show3 = false;
      // this.result.length = 0;
      // this.result.push(this.list[0]);
    },
    transferBoth() {
      //全部转入
      this.num = this.transferNum;
    },
    accounNum() {
      //账户数量
      this.axios
        .get(process.env.API_HOST + "my/wallet_account/" + this.index)
        .then(res => {
          if (res.data.code == 200) {
            this.transferNum = res.data.data.availableNum;
          } else {
          }
        });
	}
  },
  watch: {
    num: function() {
      this.num = this.num.replace(/[^\d^\.]+/g, ""); // 不能输入中文和字母
    }
  }
};
</script>

<style lang="less" scoped>
.head {
  background: transparent;
}

/deep/ .van-cell-group {
  background-color: #2c3145;
}

/deep/ .van-cell__title {
  color: #ffffff;
}

/deep/ .van-cell--clickable:active {
  background-color: #2c3145 !important;
}

/deep/ .van-cell {
  padding: 5px 5px 10px 0px;
}

/deep/ .van-cell:not(:last-child)::after {
  left: 0px;
}

/deep/ .van-button--primary {
  background: #3fb776;
  border-radius: 5px;
}

/depp/ .van-button {
  border-radius: 5px !important;
}

/deep/ .van-checkbox__icon--checked .van-icon {
  background-color: #3fb776;
  border-color: #3fb776;
}

/deep/ .van-checkbox__label {
  color: #ffffff;
}

.transfer {
  padding: 10px;
  .transfer_title {
    padding-bottom: 5px;
  }
  .transfer_content {
    p {
      margin-top: 10px;
    }
    .transfer_submit {
      width: 90%;
      margin: 50px auto 20px;
    }
  }
}

.transfer_count {
  background: #424242;
  padding: 20px;
  .count_title {
    margin-bottom: 20px;
  }
  .count_content {
    .count_count {
      margin-bottom: 20px;
    }
  }
  .footer {
    width: 100%;
    display: inline-block;
    text-align: right;
    span {
      cursor: pointer;
      padding: 5px 10px;
    }
    span:last-child {
      color: #3fb776;
      margin-left: 15px;
    }
  }
}
</style>